import { defineStore } from 'pinia'
import { ref,onMounted,nextTick } from 'vue'
import {storage} from '@/utils/storage'

let themeStore = defineStore('theme', () => {
  const themeFlag = ref(storage.get('themeFlag') || 1) // 默认Dark主题
  onMounted(()=>{
    changeTheme()
  })
  const changeTheme = () => {
    if (themeFlag.value === 1) {
      document.documentElement.style.setProperty("--theme", "#1f2a37");
      document.documentElement.style.setProperty("--grid", "#4b5563");
      document.documentElement.style.setProperty("--theme-font-color", "#fff");
      document.documentElement.style.setProperty("--theme-font-desc-color", "#9CA3AF");
      document.documentElement.style.setProperty("--theme-button-bg", "#4B5563");
      document.documentElement.style.setProperty("--theme-search-bg", "#374151");
      document.documentElement.style.setProperty("--theme-right", "#111928");
      document.documentElement.style.setProperty("--theme-hover", "#374151");
      document.documentElement.style.setProperty("--theme-table-hover", "#1B2231");
      document.documentElement.style.setProperty("--bule", "#1E429F");
      document.documentElement.style.setProperty("--bule-font", "#EBF5FF");
      document.documentElement.style.setProperty("--gridFont", "#fff");
      //
      document.documentElement.style.setProperty("--layout-progress-bg", "#1F2A37");
      document.documentElement.style.setProperty("--layout-progress", "#1F2A37");
      document.documentElement.style.setProperty("--layout-progress-active", "#374151");
      document.documentElement.style.setProperty("--layout-nav-font-color", "#FFFFFF");
      document.documentElement.style.setProperty("--layout-nav-font-color-active", "#FFFFFF");
      document.documentElement.style.setProperty("--layout-nav-font-color-hover", "#FFFFFF");
      document.documentElement.style.setProperty("--layout-nav-bg", "#374151");
      document.documentElement.style.setProperty("--layout-nav-bg-hover", "#374151");
      document.documentElement.style.setProperty("--layout-nav-svg", "#FFFFFF");
      document.documentElement.style.setProperty("--cellBg", "#111928");
      document.documentElement.style.setProperty("--theme-ant-picker", "#364251");
      document.documentElement.style.setProperty("--modalFontColor", "#9CA3AF");
      document.documentElement.style.setProperty("--scrollbar-thumb", "#4B5563");
      document.documentElement.style.setProperty("--scrollbar-track", "#111928");
      document.documentElement.style.setProperty("--inputBg", "#374151");
      document.documentElement.style.setProperty("--date", "#4B5563");
      document.documentElement.style.setProperty("--alert", "#771D1D");
      document.documentElement.style.setProperty("--modalMask", "rgba(31, 42, 55, 0.5)");
      document.documentElement.style.setProperty("--borderBottom", "#163E8D");
      document.documentElement.style.setProperty("--hoverBg", "#28333F");
      document.documentElement.style.setProperty("--numInputDisabe", "#242F3C");
      document.documentElement.style.setProperty("--numInputDecrease", "#374151");
      document.documentElement.style.setProperty("--iconControl", "#E5E7EB");
      document.querySelectorAll('.svgLayout').forEach(item => item.classList.remove('svgLayout2'))
      document.querySelectorAll('.svgClass').forEach(item => item.classList.remove('svgClass2'))
    } else if(themeFlag.value === 2) {
      document.documentElement.style.setProperty("--theme", "#fff");
      document.documentElement.style.setProperty("--grid", "#D1D5DB");
      document.documentElement.style.setProperty("--theme-font-color", "#374151");
      document.documentElement.style.setProperty("--theme-font-desc-color", "#6B7280");
      document.documentElement.style.setProperty("--theme-button-bg", "#E5E7EB");
      document.documentElement.style.setProperty("--theme-search-bg", "#F3F4F6");
      document.documentElement.style.setProperty("--theme-right", "#fff");
      document.documentElement.style.setProperty("--theme-hover", "#ebf5ff");
      document.documentElement.style.setProperty("--theme-table-hover", "#ebf5ff");
      document.documentElement.style.setProperty("--bule", "#EBF5FF");
      document.documentElement.style.setProperty("--bule-font", "#3F83F8");
      document.documentElement.style.setProperty("--gridFont", "#76A9FA");
      //
      document.documentElement.style.setProperty("--layout-progress-bg", "#F9FAFB");
      document.documentElement.style.setProperty("--layout-progress", "#F3F4F6");
      document.documentElement.style.setProperty("--layout-progress-active", "#E5E7EB");
      document.documentElement.style.setProperty("--layout-nav-font-color", "#374151");
      document.documentElement.style.setProperty("--layout-nav-font-color-active", "#3F83F8");
      document.documentElement.style.setProperty("--layout-nav-font-color-hover", "#3F83F8");
      document.documentElement.style.setProperty("--layout-nav-bg", "#EBF5FF");
      document.documentElement.style.setProperty("--layout-nav-bg-hover", "#EBF5FF");
      document.documentElement.style.setProperty("--layout-nav-svg", "#3F83F8");
      document.documentElement.style.setProperty("--cellBg", "#FFFFFF");
      document.documentElement.style.setProperty("--theme-ant-picker", "#fff");
      document.documentElement.style.setProperty("--modalFontColor", "#6B7280");
      document.documentElement.style.setProperty("--scrollbar-thumb", "#D1D5DB");
      document.documentElement.style.setProperty("--scrollbar-track", "#FFFFFF");
      document.documentElement.style.setProperty("--inputBg", "#F9FAFB");
      document.documentElement.style.setProperty("--date", "#D1D5DB");
      document.documentElement.style.setProperty("--alert", "#FFF8F1");
      document.documentElement.style.setProperty("--modalMask", "rgba(255,255,255,0.5)");
      document.documentElement.style.setProperty("--borderBottom", "#76A9FA");
      document.documentElement.style.setProperty("--hoverBg", "#F9FAFB");
      document.documentElement.style.setProperty("--numInputDisabe", "#F9FAFB");
      document.documentElement.style.setProperty("--numInputDecrease", "#F3F4F6");
      document.documentElement.style.setProperty("--iconControl", "#9CA3AF");
      document.querySelectorAll('.svgLayout').forEach(item => item.classList.add('svgLayout2'))
      document.querySelectorAll('.svgClass').forEach(item => item.classList.add('svgClass2'))
    }
  };
  const changeThemeFlag = flag => {
    themeFlag.value = flag
    storage.set('themeFlag', themeFlag.value)
  }
  return {
    themeFlag,
    changeTheme,
    changeThemeFlag
  }
})

export default themeStore